<!DOCTYPE html> 
 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>字符截取</title> 
    <style type="text/css">
     .moreObj{width: 210px;border:1px solid #ccc;}
     .listype{height: 30px;line-height: 30px;list-style-type: none;}
    </style>
    <script language="javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">

    $(function(){

        
         $('ul > li').addClass('listype');

       function cutText(txt,num)
       {
            if (num<=0) 
            {
                alert("参数错误，请重试");
                return false;
            };
            var newtxt = txt.substring(0,num)+"...";
            return newtxt;
       }

       var childenlength = document.getElementById('list').childNodes.length;
        console.log("childenlength=="+childenlength);
       for (var i = childenlength - 1; i >= 0; i--) {
           var $currentli = $('ul > li').eq(i);
           var litxt = $currentli.text();
           var currentTxt = cutText(litxt,20);
           $currentli.text(currentTxt);
       };
       

    })
    </script>
  </head> 
 
  <body>  
    <div class="moreObj">
     <ul id="list">
         <li>this is a Test111111111111111</li>
         <li>this is a Test222222222222222</li>
         <li>this is a Test33333333333333333</li>
         <li>this is a Test44444444444444444444444444</li>
         <li>this is a Test55555555555555555555555</li>
         <li>this is a Test66666666666666</li>
         <li>this is a Test66667777777777777777777</li>
         <li>this is a Test88888888888888888888888888888</li>
     </ul>
    </div>
  </body> 
</html>